<template>
  <div :id="id" :style="{ width: width, height: height }" />
</template>

<script>
export default {
  name: 'Pie1',
  props: {
    id: {
      type: String,
      default: 'myChart'
    },
    width: {
      type: String,
      default: '1000px'
    },

    height: {
      type: String,
      default: '400px'
    },
    seriesData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {}
  },
  watch: {
    seriesData: {
      deep: true,
      handler(val) {
        this.drawLine(val)
      }
    }
  },

  mounted() {
    this.$nextTick(function() {
      this.drawLine()
    })
  },

  methods: {
    drawLine(data) {
      const myChart = this.echarts.init(document.getElementById(this.$props.id))
      const optionPie1 = {
        title: {
          text: '数据源类型统计',
          left: 'left'
        },
        tooltip: {
          trigger: 'item'
        },
        color: [
          '#fc8251',
          '#5470c6',
          '#91cd77',
          '#ef6567',
          '#f9c956',
          '#75bedc'
        ],
        legend: {
          orient: 'vertical',
          left: 'right',
          show: true,
          formatter: (name) => {
            const seriesData = data || []
            const item = seriesData.find((item) => item.name === name)
            return item ? `${item.name}: ${item.value}` : name
          }
        },
        series: [
          {
            name: '数据源统计',
            type: 'pie',
            // radius: "60%",
            radius: ['40%', '60%'],
            center: ['35%', '60%'],
            padAngle: 5,
            itemStyle: {
              borderRadius: 10
            },
            data: data,
            // 显示数值
            // label: {
            //   normal: {
            //     show: true,
            //     // position: "inner", // 数值显示在内部
            //     formatter: "{b}: {c}" // 格式化数值百分比输出
            //   }
            // },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      window.addEventListener('resize', () => {
        myChart.resize()
      })
      myChart.setOption(optionPie1)
    }
  }
}
</script>
